import { AppstoreOutlined, MailOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React from 'react';
import { history } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

// const items: MenuItem[] = [
//   getItem('首页', '/welcome', <MailOutlined />),

//   getItem('UI', 'sub2', <AppstoreOutlined />, [
//     getItem('按钮', '/ui/buttons'),
//     getItem('弹框', '/ui/modal'),
//     getItem('Loading', '/ui/loading'),
//   ]),

//   getItem('表单', 'sub3', <AppstoreOutlined />, [
//     getItem('登录', '/form/login'),
//     getItem('注册', '/form/reg'),
//   ]),

//   getItem('表格', '/table', <MailOutlined />),
//   getItem('学生管理', '/students', <MailOutlined />),
//   getItem('地图', '/map', <MailOutlined />),
// ];

const onClick: MenuProps['onClick'] = (e) => {
  // console.log('click', e);
  history.push('/admin' + e.key);
};

const App: React.FC = () => {
  const auth = JSON.parse(localStorage.getItem('auth') || '[]');

  const arr = [
    {
      title: '首页',
      path: '/welcome',
      icon: <MailOutlined />,
      auth: 1,
    },
    {
      title: 'UI',
      path: 'sub2',
      icon: <AppstoreOutlined />,
      auth: 2,
      children: [
        {
          title: '按钮',
          path: '/ui/buttons',
        },
        {
          title: '弹框',
          path: '/ui/modal',
        },
        {
          title: 'Loading',
          path: '/ui/loading',
        },
      ],
    },
    {
      title: '表单',
      path: 'sub3',
      icon: <AppstoreOutlined />,
      auth: 3,
      children: [
        {
          title: '登录',
          path: '/form/login',
        },
        {
          title: '注册',
          path: '/form/reg',
        },
      ],
    },
    {
      title: '表格',
      path: '/table',
      icon: <MailOutlined />,
      auth: 4,
    },
    {
      title: '学生管理',
      path: '/students',
      icon: <MailOutlined />,
      auth: 5,
    },
    {
      title: '地图',
      path: '/map',
      icon: <MailOutlined />,
      auth: 6,
    },
  ];

  const items = arr
    .filter((item) => auth.includes(item.auth))
    .map((value) => {
      return getItem(
        value.title,
        value.path,
        value.icon,
        value.children &&
          value.children.map((val) => {
            return getItem(val.title, val.path);
          }),
      );
    });
  return <Menu onClick={onClick} mode="vertical" items={items} theme="dark" />;
};

export default App;
